<template>
  <div>
    <NavBar />
    <div class="main-content">
      <div class="container">
        <v-container fluid class="px-4">
          <v-row no-gutters class="grid-container">
            <!-- 代买需求区域 -->
            <v-col class="grid-item">
              <div class="box section-title">代买需求</div>
                <table>
                  <thead>
                    <tr>
                      <th>需求编号</th>
                      <th>用餐类别</th>
                      <th>餐厅</th>
                      <th>餐品</th>
                      <th>购买数量</th>
                      <th>总金额</th>
                      <th>校园卡号</th>
                      <th>外送位置</th>
                      <th>服务小费</th>
                      <th>预期时间</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in mealRequests" :key="item.DemandID" @click="confirmRequest(item)">
                      <td>{{ item.DemandID }}</td>
                      <td>{{ item.MealType }}</td>
                      <td>{{ item.Restaurant }}</td>
                      <td>{{ item.Dish }}</td>
                      <td>{{ item.Quantity }}</td>
                      <td>{{ item.TotalAmount }}</td>
                      <td>{{ item.BuyerID }}</td>
                      <td>{{ item.DeliveryLoc }}</td>
                      <td>{{ item.ServiceCharge }}</td>
                      <td>{{ item.ExpectedTime }}</td>
                      <!-- 添加其他数据列 -->
                    </tr>
                  </tbody>
                </table>
            </v-col>
            <!-- 代买服务区域 -->
            <v-col class="grid-item">
              <div class="box section-title">代买服务</div>
                <table>
                  <thead>
                    <tr>
                      <th>服务编号</th>
                      <th>用餐类别</th>
                      <th>餐厅</th>
                      <th>餐品</th>
                      <th>购买数量</th>
                      <th>总金额</th>
                      <th>校园卡号</th>
                      <th>外送位置</th>
                      <th>服务小费</th>
                      <th>服务时间</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in mealServices" :key="item.DemandID" @click="confirmService(item)">
                      <td>{{ item.DemandID }}</td>
                      <td>{{ item.MealType }}</td>
                      <td>{{ item.Restaurant }}</td>
                      <td>{{ item.Dish }}</td>
                      <td>{{ item.Quantity }}</td>
                      <td>{{ item.TotalAmount }}</td>
                      <td>{{ item.BuyerID }}</td>
                      <td>{{ item.DeliveryLoc }}</td>
                      <td>{{ item.ServiceCharge }}</td>
                      <td>{{ item.ServiceTime }}</td>
                      <!-- 添加其他数据列 -->
                    </tr>
                  </tbody>
                </table>
            </v-col>
          </v-row>
        </v-container>
      </div>
    </div>
  </div>
</template>

<script setup>
import NavBar from './NavBar.vue'
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

onMounted(() => {
  console.log('mounted');
  getMealRequests();
  getMealServices();
});

const router = useRouter();
const mealRequests = ref([]);
const mealServices = ref([]);
const userID = localStorage.getItem('userID');

const getMealRequests = () => {
  try{
    const response = axios.get('http://localhost:8080/meal-requests');
    response.then(res => {
      mealRequests.value = res.data;
    });
  }
  catch(error){
    console.log(error);
    alert('获取代买需求失败');
  }
};

const getMealServices = () => {
  try{
    const response = axios.get('http://localhost:8080/meal-services');
    response.then(res => {          
      mealServices.value = res.data;
    });
  }
  catch(error){
    console.log(error);
    alert('获取代买服务失败');
  }
};

const confirmRequest = (item) => {
  if (confirm(`确定要接受这个需求吗？需求编号: ${item.DemandID}`)) {
    const formData = new URLSearchParams();
    formData.append('RequestID', item.DemandID);
    formData.append('Card1', item.BuyerID);
    formData.append('DeliveryLoc', item.DeliveryLoc)
    formData.append('Card2', localStorage.getItem('userID'))
    formData.append('MealType', item.MealType)
    formData.append('Restaurant', item.Restaurant)
    formData.append('Dish', item.Dish)
    formData.append('Quantity', item.Quantity)
    formData.append('TotalAmount', item.TotalAmount)
    formData.append('ServiceCharge', item.ServiceCharge)
    try{
      const response = axios.post('http://localhost:8080/confirmorder', formData);
      response.then(res => {
        console.log(res.data);
        if(res.data.success){
          alert('接受需求成功');
          router.push('/user-info');
      }else{
          alert('接受需求失败');
      }
    });
  }
  catch(error){
    console.log(error);
    alert('接受需求失败');
  }
}
};

const confirmService = (item) => {
  if (confirm(`确定要接受这个服务吗？服务编号: ${item.DemandID}`)) {
    const formData = new URLSearchParams();
    formData.append('ServiceID', item.DemandID);
    formData.append('Card1', localStorage.getItem('userID'));
    formData.append('DeliveryLoc', item.DeliveryLoc)
    formData.append('Card2', item.BuyerID)
    formData.append('MealType', item.MealType)
    formData.append('Restaurant', item.Restaurant)
    formData.append('Dish', item.Dish)
    formData.append('Quantity', item.Quantity)
    formData.append('TotalAmount', item.TotalAmount)
    formData.append('ServiceCharge', item.ServiceCharge)
    try{
      const response = axios.post('http://localhost:8080/confirmorder', formData);
      response.then(res => {
        console.log(res.data);
        if(res.data.success){
          alert('接受服务成功');
          router.push('/user-info');
      }else{
          alert('接受服务失败');
      }
    });
    }
    catch(error){
      console.log(error);
      alert('接受服务失败');
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 95%;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

.login-options {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.grid-item {
  background: white;
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--hover-shadow);
}

.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--border-color);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  height: 50px;
  position: sticky;
  top: 0;
  background: var(--primary-gradient);
  color: white;
  padding: 0.1rem;
  text-align: center;
  font-weight: 500;
}

td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

tr:hover {
  background-color: rgba(66, 185, 131, 0.05);
}

@media (max-width: 768px) {
  .container {
    margin: 1rem;
    padding: 1rem;
  }

  .grid-container {
    grid-template-columns: 1fr;
  }

  .login-options {
    flex-direction: column;
  }
}
</style>